<template>
	<view>
		<view class="list">
			<view class="list1">
				<text class="list1text">*</text>来访人员姓名
			</view>
			<input class="list1inp" type="text" placeholder="请填写姓名" v-model="name">
		</view>
		<view class="xian">
			<image class="xian" src="https://x.bilinmeiju.com/static/xian.png" mode=""></image>
		</view>

		<view class="list">
			<view class="list1">
				<text class="list1text">*</text>来访人员性别
			</view>
			<view class="list2">
				<picker :range="gender" :value="xbindex" @change="xingbiebing">
					<view class="list1inp">{{gender[xbindex]?gender[xbindex]:'请选择性别'}}</view>
				</picker>
				<image class="list2img" src="/static/xfh.png" mode=""></image>
			</view>
		</view>
		<view class="xian">
			<image class="xian" src="https://x.bilinmeiju.comstatic/xian.png" mode=""></image>
		</view>
		<view class="list">
			<view class="list1">
				来访人手机号码
			</view>
			<input class="list1inp" type="text" placeholder="请填写来访人员手机号码" v-model="phone">
		</view>
		<view class="xian">
			<image class="xian" src="https://x.bilinmeiju.com/static/xian.png" mode=""></image>
		</view>
		<view class="list">
			<view class="list1">
				<text class="list1text">*</text>来访时间
			</view>

			<view class="list2" style="width: 500rpx;" @click="datexz">
				<view class="list1inp">{{datetimerange?datetimerange[0]:'起始时间'}}</view>
				<view class="">
					至
				</view>
				<view class="list1inp">{{datetimerange?datetimerange[1]:'结束时间'}}</view>
			</view>

		</view>
		<view class="xian">
			<image class="xian" src="https://x.bilinmeiju.com/static/xian.png" mode=""></image>
		</view>
		<view class="list">
			<view class="list1">
				房号
			</view>
			<view class="list2" v-if="myroom.length==0">
				<!-- <view class="list1inp">期/栋/单元/层/房号</view> -->

				<picker mode="multiSelector" :range="list" range-key="title" :value="value" @columnchange="changecolum"
					@change="setroom">
					<view class="list1inp">{{formatvalue}}</view>
				</picker>

				<image class="list2img" src="/static/xfh.png" mode=""></image>
			</view>
			<view class="list2" v-if="myroom.length>0">
				<picker :range="myroom" range-key="roomname">
					<view class="list1inp">{{myroom[0].roomname}}112</view>
				</picker>
				<image class="list2img" src="/static/xfh.png" mode=""></image>
			</view>
		</view>


		<view class="xian">
			<image class="xian" src="https://x.bilinmeiju.com/static/xian.png" mode=""></image>
		</view>
		<view class="list">
			<view class="list1">
				<text class="list1text">*</text>来访人证件号
			</view>
			<input class="list1inp" type="text" placeholder="请填写身份证号码" v-model="cardno">
		</view>
		<view class="xian">
			<image class="xian" src="https://x.bilinmeiju.com/static/xian.png" mode=""></image>
		</view>
		<view class="list">
			<view class="list1">
				<text class="list1text">*</text>来访人车辆信息
			</view>
			<input class="list1inp" type="text" placeholder="请填写车辆信息" v-model="carnumber">
		</view>
		<view class="xian">
			<image class="xian" src="https://x.bilinmeiju.com/static/xian.png" mode=""></image>
		</view>
		<view class="list">
			<view class="list1">
				<text class="list1text">*</text>来访事由
			</view>
			<input class="list1inp" type="text" placeholder="请填写事由" v-model="memo">
		</view>
		<view class="xian">
			<image class="xian" src="https://x.bilinmeiju.com/static/xian.png" mode=""></image>
		</view>
		<!-- <view class="list">
			<view class="list1">
				<text class="list1text"></text>访客照片
			</view>
			<view class="list3">
				<image class="list3img" src="/static/jia.png" mode=""></image>
			</view>
		</view> -->
		<view class="bottom" @click="tijiao">
			确认提交
		</view>

		<uni-datetime-picker ref="datexuanze" style="opacity: 0;" v-model="datetimerange" type="datetimerange"
			rangeSeparator="至">
			<view class="">
			</view>
		</uni-datetime-picker>
		<view ref="box"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				roomname: '',
				name: '',
				xbindex: '',
				gender: ['男', '女'],
				roomId: '',
				list: [],
				formatvalue: '期/栋/单元/层/房号',
				value: [],
				roomlist: [],
				phone: '',
				buildingId: '',
				unitId: '',
				datetimerange: '',
				cardno: '',
				carnumber: '',
				memo: '',
				myroom: []
			}
		},
		onLoad() {
			this.$post('center/getmyphone', {}).then(res => {
				this.oldphone = res.data.phone;
				// this.phone = res.data.phone;
				this.list = res.data.list;
				this.value = [0, 0, 0]
			})
			this.getuser()
		},
		watch: {

			datetimerange(newval) {
				console.log('范围选:', this.datetimerange);
			}
		},
		mounted() {
			setTimeout(() => {
				this.datetimesingle = Date.now() - 2 * 24 * 3600 * 1000
				this.single = '2021-2-12'
				// this.datetimerange = ["2021-07-08 0:01:10", "2021-08-08 23:59:59"]
			}, 3000)
		},
		methods: {
			tijiao() {
				this.$post('center/upfangke', {
					name: this.name,
					gender: this.xbindex * 1 + 1,
					phone: this.phone,
					stime: this.datetimerange[0],
					etime: this.datetimerange[1],
					roomId: this.roomId,
					cardno: this.cardno,
					carnumber: this.carnumber,
					memo: this.memo
				}).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					setTimeout(res => {
						uni.navigateBack({
							delta: 1
						}, 1500)
					})
				})
			},
			getuser() {
				this.$post('center/getuser', {}).then(res => {
					this.myroom = res.data.user.myroom
					this.roomId = res.data.user.myroom[0].roomId
				})
			},
			xingbiebing(e) {
				this.xbindex = e.detail.value
			},
			datexz() {
				this.$refs.datexuanze.show()
			},
			changecolum(e) {
				var column = e.detail.column;
				var index = e.detail.value;
				if (column == 0) {
					//获取吧
					var buildingId = this.list[column][index]['buildingId'];
					this.getlist2(buildingId);
					this.value = [index, 0, 0]
				}
				if (column == 1) {
					var unitId = this.list[column][index]['unitId'];
					this.getlist3(unitId);
					this.value[1] = index;
					this.value[2] = 0;
				}
				if (column == 2) {
					this.value[2] = index;
				}
				this.$forceUpdate();
			},
			setroom(e) {
				this.value = e.detail.value;
				var value = this.value;
				var list = this.list;
				var str = list[0][value[0]].title + '/';
				str += list[1][value[1]].title + '/';
				str += list[2][value[2]].title;
				this.formatvalue = str;
				this.buildingId = list[0][value[0]].buildingId;
				this.unitId = list[1][value[1]].unitId;
				this.roomId = list[2][value[2]].roomId;
				this.$post('center/roominfo', {
					roomId: this.roomId
				}).then(res => {
					this.phone = res.data.yzphone;
					this.yzphone = res.data.hideyzphone;
				})
			},
			getlist3(unitId) {
				this.$post('center/gethushi', {
					unitId: unitId
				}).then(res => {
					if (res.data.list) {
						this.list[2] = res.data.list;
					} else {
						this.list[2] = [];
					}
					this.$forceUpdate();
				})
			},
			// myroom(){
			// 	this.$post('center/roominfo',{roomId:this.roomId}).then(res=>{
			// 		this.roomname = res.data.roomname;
			// 		if(!this.roomId) this.roomId = res.data.roomId;
			// 		this.list = res.data.list;
			// 		this.roomlist = res.data.roomlist;
			// 		if(this.roomlist.length==0){
			// 			var box = {
			// 				isshow:true,
			// 				title:'请绑定房产',
			// 				content:'请先进行房产绑定',
			// 				content2:'然后进行数据录入',
			// 				btntitle:'去绑定',
			// 				path:'/pages/fangchanbangding/fangchanbangding',
			// 				type:2
			// 			}
			// 			this.$refs.box.open(box)
			// 		}
			// 	})
			// }
		}
	}
</script>

<style>
	.list {
		width: 86vw;
		margin: 0 auto;
		margin-top: 20rpx;
		padding-top: 20rpx;
	}

	.list1 {
		font-size: 24rpx;
		font-family: Alibaba;
		font-weight: 1000;

		line-height: 20px;
	}

	.list1text {
		color: #FF0000;
	}

	.list1inp {
		margin-top: 10rpx;
		font-size: 24rpx;
		font-family: Alibaba;
		font-weight: normal;
		color: #999999;
		line-height: 20rpx;
	}

	.list2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.list2img {
		width: 17rpx;
		height: 9rpx;
	}

	.list3 {
		margin-top: 20rpx;
		width: 125rpx;
		height: 125rpx;
		background-color: #EEEEEE;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.list3img {
		/* margin: 46rpx; */
		width: 36rpx;
		height: 36rpx;
	}

	.xian {
		width: 674rpx;
		height: 2rpx;
		margin: 0 auto;
	}

	.bottom {
		position: fixed;
		bottom: 50rpx;
		left: 25rpx;
		width: 700rpx;
		height: 100rpx;
		margin: 0 auto;
		background-image: url('https://x.bilinmeiju.com/static/anbj.png');
		background-size: 700rpx auto;
		line-height: 100rpx;
		color: white;
		font-size: 34rpx;
		font-weight: 600;
		text-align: center;
	}
</style>
